<template>
  <div class="searchPageTwo">
    <Head />
    <div class="searchPageTwo-title">
      <div class="left" @click="gotoBack">
        <van-icon name="arrow-left" size="0.5rem" />
      </div>
      <div class="center">
        <SearchInput />
      </div>
      <div class="right" @click="gotoCity">
        <van-icon name="location-o" size="0.5rem" style="margin: 0 auto" />
      </div>
    </div>

    <!-- 占位 -->
    <div class="tt"></div>

    <!-- 标头 -->
    <div class="searchPageTwo-box">
      <van-dropdown-menu>
        <van-dropdown-item title="位置" ref="item">
          <Location @siteInfo="siteInfo" @two="two" @three="three" />
          <van-button
            type="default"
            size="large"
            color="linear-gradient(to right, #ff6034, #ee0a24)"
            @click="confirm"
            >确 定</van-button
          >
        </van-dropdown-item>
        <van-dropdown-item title="租金"></van-dropdown-item>
        <van-dropdown-item title="筛选"></van-dropdown-item>
        <van-dropdown-item title="排序"></van-dropdown-item>
      </van-dropdown-menu>
    </div>

    <!-- 首页 -->
    <SearchHouse :searchHouseList="searchHouseList" />
  </div>
</template>

<script>
import api from "../../../api";
import Head from "../../../components/head/Head";
import SearchInput from "../../../components/searchInput/SearchInput";
import SearchHouse from "./SearchHouse";
import loading from "../pullLoading/pullLoading.js";
import { Dialog } from "vant";
import Location from "./Location";

export default {
  name: "SearchPageTwo",
  data() {
    return {
      radio: "1",
      active: 0,
      page: 1,
      searchHouseList: [],
      isSiteInfo: "", // 子组件Location  传来的值
      isTwo: "",
      isThree: "",
    };
  },
  components: {
    Head,
    SearchInput,
    SearchHouse,
    Location,
  },
  mounted() {
    this.http();
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    // 上箭头
    gotoBack() {
      this.$router.go(-1);
    },
    // 城市选择
    gotoCity() {
      console.log(2);
      this.$router.push("/city");
    },
    // 网络请求
    http() {
      api.gotoSearchHouse().then((res) => {
        // console.log(res.data.list);
        this.searchHouseList = [...this.searchHouseList, ...res.data.list];
        this.page++;
      });
    },
    // 下拉加载更多
    handleScroll() {
      if (this.page < 3) {
        loading(this.page, this.http);
      } else {
        Dialog({ message: "客官，没有更多房源了..." });
        this.page = 1;
        window.removeEventListener("scroll", this.handleScroll);
      }
    },
    // 点击关闭下拉菜单
    confirm() {
      if (this.two || this.three) {
        this.$toast("您当前选择的出行方式 ：" + this.isTwo, this.isThree);
      }
      // this.$toast("您当前选择的地方为 ：" + this.isSiteInfo);
      this.$refs.item.toggle();
    },
    // 接受Loacation组件传值
    siteInfo(siteInfo) {
      this.isSiteInfo = siteInfo;
    },
    two(two) {
      console.log(two);
      this.isTwo = two;
    },
    three(three) {
      console.log(three);
      this.isThree = three;
    },
  },
};
</script>

<style lang="less">
.tt {
  width: 100%;
  height: 0.8rem;
  //   background-color: royalblue;
}
.searchPageTwo-title {
  //   height: 0.8rem;
  line-height: 0.8rem;
  position: relative;
  top: -1.1rem;
  .left {
    width: 10%;
    height: 0.8rem;
    float: left;
    display: flex;
    align-items: center;
    justify-items: center;
  }
  .center {
    width: 80%;
    float: left;
  }
  .right {
    width: 10%;
    height: 0.8rem;
    float: left;
    display: flex;
    align-items: center;
    justify-items: center;
  }
}
.searchPageTwo-box {
  position: relative;
  top: -0.8rem;
}
</style>
